/*
* Copyright 2019-2020 Zheng Jie
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/

@mixin clearfix {
  &::after {
    display: table;
    clear: both;
    content: "";
  }
}

@mixin scrollBar {
  &::-webkit-scrollbar-track-piece {
    background: #d3dce6;
  }

  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-thumb {
    background: #99a9bf;
    border-radius: 20px;
  }
}

@mixin text-overflow {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin multiple-lines {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
}

@mixin relative {
  position: relative;
  width: 100%;
  height: 100%;
}

@mixin pct($pct) {
  position: relative;
  width: #{$pct};
  margin: 0 auto;
}

@mixin responsive-backgroud {
  background-repeat: no-repeat;
  background-position: center;
  background-origin: content-box;
  background-size: contain;
}

@mixin checkmark($width, $height, $borderWidth, $borderColor) {
  display: inline-block;
  width: $width;
  height: $height;
  border-right: $borderWidth solid $borderColor;
  border-bottom: $borderWidth solid $borderColor;
  transform: rotate(45deg);
}

@mixin triangle($width, $height, $color, $direction) {
  $width: $width/2;
  $color-border-style: $height solid $color;
  $transparent-border-style: $width solid transparent;

  width: 0;
  height: 0;

  @if $direction==up {
    border-right: $transparent-border-style;
    border-bottom: $color-border-style;
    border-left: $transparent-border-style;
  }

  @else if $direction==right {
    border-top: $transparent-border-style;
    border-bottom: $transparent-border-style;
    border-left: $color-border-style;
  }

  @else if $direction==down {
    border-top: $color-border-style;
    border-right: $transparent-border-style;
    border-left: $transparent-border-style;
  }

  @else if $direction==left {
    border-top: $transparent-border-style;
    border-right: $color-border-style;
    border-bottom: $transparent-border-style;
  }

  @else if $direction==right-up {
    border: $width solid $color;
    border-top: $transparent-border-style;
    border-left: $transparent-border-style;
  }
}

@mixin rotate($duration) {
  animation: spin infinite $duration linear;
}

@keyframes spin {
  from {
    transform: rotate(330deg);
  }

  to {
    transform: rotate(-30deg);
  }
}
